<?php

use \app\assets\BackendAsset as Asset;
use \app\models\tableModel\AdminRoleModel;

/* @var $this yii\web\View */

?>
<el-container class="index-wrapper">
    <el-header class="top-wrapper bg-white is-scroll" height="auto" ref="mainScrollShadow">
        <el-row :inline="true" class="button-container">
            <el-col :xs="12" :sm="12" :md="12" :lg="5">
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item>
                        <a @click="goToIndex"><i class="el-icon-location-outline"></i>&nbsp;首页</a>
                    </el-breadcrumb-item>
                    <el-breadcrumb-item @dblclick.native="window.open(window.location.href)">
                        页面碎片
                    </el-breadcrumb-item>
                </el-breadcrumb>
            </el-col>
            <el-col :xs="12" :sm="12" :md="12" :lg="19" class="text-right">
                <el-form class="search-container">
                    <el-form-item>
                        <el-radio-group v-model="deviceType" size="mini" class="card-mode"
                                        @change="deviceChange">
                            <el-radio label="pc">电脑端</el-radio>
                            <el-radio label="mobile">手机端</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
    </el-header>
    <el-main class="content-wrapper transits bg-white">
        <div class="pv-10 ph-15" style="display: none;">
            <!-- 提醒 START -->
            <div class="tip">
                <el-collapse v-model="setting.activeNotice" accordion>
                    <el-collapse-item>
                        <template slot="title">
                            <i class="el-icon el-icon-info"></i>
                            &nbsp;&nbsp;
                            <span class="title">
                                温馨提示
                            </span>
                        </template>
                        <div class="content">
                            <p>
                                1、一些小提示: 我是提示；
                                一些小代码：<code>我是小代码</code>
                            </p>
                        </div>
                    </el-collapse-item>
                </el-collapse>
            </div>
            <!-- 提醒 END -->
        </div>
        <div>
            <div class="block-left" :class="!isCollapse?'left-open':'left-close'">
                <el-scrollbar class="main-scroller">
                    <div class="menu-top pb-10">
                        <span>碎片页面列表</span>
                        <span class="el-icon-refresh pointer" title="刷新"
                              @click="getCategory([], 'INIT')"></span>
                        <span class="el-icon-s-fold pointer" title="缩小" @click="collapse"></span>
                    </div>
                    <el-tree :data="category.list" :load="getCategory" :props="{isLeaf: 'leaf'}"
                             lazy node-key="id" :expand-on-click-node="false" node-key="id"
                             ref="selectFile" :check-on-click-node="true"
                             @current-change="changeSelMenu"
                             :default-expanded-keys="menuDefaultKey"
                             :default-checked-keys="menuDefaultKey">
                        <span class="custom-tree-node" slot-scope="{ node, data }">
                            <span>
                                <i class="el-icon-folder-opened" v-if="!data.leaf"></i>
                                <i class="el-icon-document" v-else></i>
                                {{ data.name }}
                            </span>
                            <span v-if="data.detail_page !== false">
                                <el-button type="text" size="mini" v-if="data.leaf"
                                           @click.stop="changeSelMenu(data, 'detail')">
                                    [内容页]
                                </el-button>
                            </span>
                        </span>
                    </el-tree>
                </el-scrollbar>
            </div>
            <div class="block-right" :class="!isCollapse?'right-close':'right-open'"
                 @mousemove="collapseDragStart">
                <span class="el-icon-s-unfold pointer" title="展开" @click="collapse"
                      @mouseup="dragIng=false" @mouseout="dragIng=false" @mousedown="dragIng=true"
                      :style="colButtDragStyle"></span>
                <div v-if="deviceType == 'pc'" class="w-h-100" v-loading.lock="pageLoading"
                     element-loading-background="rgba(255, 255, 255, 0.8)"
                     element-loading-text="加载中...">
                    <iframe :src="pageUrl" frameborder="0" v-show="pageUrl" id="pageIframe"></iframe>
                    <div v-show="!pageUrl">
                        <div class="pt-150"></div>
                        <el-empty :image-size="100" description="请点击左侧菜单打开页面"></el-empty>
                    </div>
                </div>
                <div v-if="deviceType == 'mobile'" class="mobile-show" v-loading.lock="pageLoading"
                     element-loading-background="rgba(255, 255, 255, 0.8)"
                     element-loading-text="加载中...">
                    <iframe :src="pageUrl" frameborder="0" v-show="pageUrl" id="pageIframe"></iframe>
                    <div v-show="!pageUrl">
                        <div class="pt-150"></div>
                        <el-empty :image-size="100" description="请点击左侧菜单打开页面"></el-empty>
                    </div>
                </div>
            </div>
        </div>
    </el-main>
</el-container>

<!--碎片基本信息 弹出层-->
<el-dialog :title="(blockIsAdd?'添加':'编辑') + '碎片'" :visible.sync="showBlockDialog"
           width="70%" class="block-dialog dialog-medium scroll-dialog" :lock-scroll="true"
           :close-on-click-modal="false" modal-append-to-body append-to-body
           @close="closeBlockDialog">

    <el-form :model="blockForm" :rules="blockFormRule" ref="blockForm" label-width="80px"
             class="mv-15" label-position="left" :validate-on-rule-change="false">
        <el-tabs v-model="blockTabAct" :class="blockTabAct=='second'?'second-class':''">
            <el-tab-pane label="基本信息" name="first">
                <el-scrollbar class="main-scroller">

                    <el-form-item label="碎片名称" prop="name" class="form-item"
                                  :error="blockError.name">
                        <el-input placeholder="请输入名称" tabindex="1" class="form-element"
                                  v-model="blockForm.name" size="small">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="碎片类型" prop="type" class="form-item"
                                  :error="blockError.type">
                        <el-select v-model="blockForm.type" placeholder="请选择" size="small" class="form-item">
                            <el-option v-for="item in setting.type_list" :label="item.text"
                                       :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="碎片位置" class="form-item" :error="blockError.pos"
                                  prop="pos">
                        <el-input placeholder="请输入位置" tabindex="2" v-model="blockForm.pos"
                                  size="small" :disabled="disabledPosName" class="form-element">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="展示数量" prop="limit" v-show="!showTempEditor" class="form-item"
                                  :error="blockError.limit">
                        <el-input placeholder="请输入展示数" tabindex="3" class="form-element"
                                  v-model="blockForm.limit" size="small">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="模板内容" prop="template" :error="blockError.template"
                                  class="form-item" v-if="settingOver && blockForm.type">
                        <div v-if="!showTempEditor&&blockForm.type">
                            <el-button type="primary" size="mini" @click="addEachCode">
                                叠加循环
                            </el-button>
                            <span class="font-third">
                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                smarty语法例：
                                <span>{{setting.left_delimiter}}</span>
                                $data['id']
                                <span>{{setting.right_delimiter}}</span>
                            </span>
                        </div>
                        <div v-if="blockForm.type == setting.type_list.html.value">
                            <?= $this->render('../common/html-editor.php', [
                                'column' => 'blockForm.template',
                                'scenario' => 'block',
                                'height' => 450,
                                'autoInit' => false
                            ]);?>
                        </div>
                        <div v-else-if="blockForm.type == setting.type_list.listHtml.value">
                            <?= $this->render('../common/code-editor.php', [
                                'column' => 'blockForm.template',
                                'height' => 450
                            ]);?>
                        </div>
                    </el-form-item>

                </el-scrollbar>
            </el-tab-pane>

            <el-tab-pane label="数据条目信息" name="second" v-if="!showTempEditor">
                <el-scrollbar class="main-scroller">

                    <div class="text-right top-wrapper">
                        <el-button type="success" size="mini" icon="el-icon-circle-plus-outline"
                                   @click="addDataRaw">
                            添加数据
                        </el-button>
                        <el-button type="danger" size="mini" icon="el-icon-edit"
                                   @click="editRwoColumn">
                            编辑字段
                        </el-button>
                    </div>
                    <el-table :data="dataForm" style="width: 100%">

                        <el-table-column type="index" width="50"></el-table-column>

                        <el-table-column :prop="item.name" :label="item.title"
                                         v-for="(item, key) in dataColumn">
                            <template slot-scope="scope">
                                <el-image v-if="item.type==setting.data_type_list.image.value"
                                          fit="fill" style="width: 100px; height: 100px"
                                          :src="scope.row[item.name]"
                                          :preview-src-list="[scope.row[item.name]]">
                                </el-image>
                                <el-tooltip v-else-if="item.type==setting.data_type_list.url.value"
                                            class="item" effect="light" placement="top-start"
                                            :content="scope.row[item.name]">
                                    <a :href="scope.row[item.name]" class="text-more-ellipsis"
                                       target="_blank">
                                        <span v-text="scope.row[item.name]" class="pointer">
                                        </span>
                                    </a>
                                </el-tooltip>
                                <el-tooltip v-else class="item" effect="light"
                                            placement="top-start"
                                            :content="scope.row[item.name]">
                                    <div class="text-more-ellipsis">
                                        <span v-text="scope.row[item.name]" class="pointer">
                                        </span>
                                    </div>
                                </el-tooltip>
                            </template>
                        </el-table-column>

                        <el-table-column label="操作" width="200" fixed="right" class-name="operate-column">
                            <template slot-scope="scope">
                                <el-button type="text" size="small"
                                           @click="editDataRaw(scope.$index)">编辑</el-button>
                                <el-button type="text" size="small" class="text-danger"
                                           @click="delDataRaw(scope.$index)">删除</el-button>
                                <el-button type="text" size="small"
                                           @click="dataRowUp(scope.$index)">上移</el-button>
                                <el-button type="text" size="small"
                                           @click="dataRowDown(scope.$index)">下移</el-button>
                            </template>
                        </el-table-column>
                    </el-table>

                </el-scrollbar>
            </el-tab-pane>
        </el-tabs>
    </el-form>
    <div class="text-center" slot="footer">
        <el-button type="danger" size="small" @click="showBlockDialog = false">
            取消
        </el-button>
        <el-button type="primary" size="small" @click="submitBlock" v-if="blockIsAdd">
            添加
        </el-button>
        <el-button type="primary" size="small" @click="submitBlock" v-else>
            更新
        </el-button>
    </div>
</el-dialog>
<!--碎片基本信息 弹出层-->

<!--信息条目 弹出层-->
<el-dialog :title="(blockRowIsAdd?'添加':'编辑') + '条目'" :visible.sync="showDataColumnDialog"
           width="70%" class="dialog-medium scroll-dialog" :lock-scroll="true"
           :close-on-click-modal="false">

    <el-scrollbar class="main-scroller" v-if="setting.data_type_list">
        <el-form :model="blockRowForm" ref="blockRowForm" label-width="130px" class="form-full pr-90"
                 v-loading="dataRawUpLoading">

            <el-form-item :label="item.title" prop="pos" class="has-warning-form"
                          v-for="(item, key) in dataColumn">

                <div v-if="item.type==setting.data_type_list.image.value">
                    <?= $this->render('../common/uploader.php', [
                        'column' => 'blockRowForm[item.name]',
                        'scenario' => 'block'
                    ]) ?>
                </div>
                <el-input v-else-if="item.type==setting.data_type_list.integer.value"
                          v-model="blockRowForm[item.name]" size="small"
                          class="has-warning-input">

                </el-input>
                <el-input v-else v-model="blockRowForm[item.name]" :autosize="{ minRows: 2}"
                          size="small" class="has-warning-input" type="textarea">

                </el-input>

            </el-form-item>

        </el-form>
    </el-scrollbar>

    <div class="text-center" slot="footer">
        <el-button type="danger" size="small" @click="showDataColumnDialog = false">
            取消
        </el-button>
        <el-button type="primary" size="small" @click="submitBlockData"
                   v-if="blockRowIsAdd">
            提交
        </el-button>
        <el-button type="primary" size="small" @click="submitBlockData"
                   v-if="!blockRowIsAdd">
            更新
        </el-button>
    </div>

</el-dialog>
<!--信息条目 弹出层-->

<!--数据字段 弹出层-->
<el-dialog title="编辑数据字段" :visible.sync="dataColumnDialog" width="70%" :lock-scroll="true"
           class="dialog-medium scroll-dialog" :close-on-click-modal="false">

    <el-scrollbar class="main-scroller no-gutter" v-if="setting.data_type_list">
        <div class="text-right">
            <el-button type="success" size="mini" icon="el-icon-circle-plus-outline"
                       @click="addDataColumn">
                添加字段
            </el-button>
            <el-button type="danger" size="mini" icon="el-icon-circle-edit"
                       @click="resetRwoColumn">
                重置字段
            </el-button>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        </div>
        <el-table :data="stageColumnData" style="width: 100%">
            <el-table-column prop="name" width="20">
                <template slot-scope="scope">
                    &nbsp;
                </template>
            </el-table-column>
            <el-table-column prop="name" label="字段名">
                <template slot-scope="scope">
                    <el-input placeholder="请输入内容" v-model="scope.row.name"
                              size="small">
                    </el-input>
                </template>
            </el-table-column>
            <el-table-column prop="title" label="字段别名">
                <template slot-scope="scope">
                    <el-input placeholder="请输入内容" v-model="scope.row.title"
                              size="small">
                    </el-input>
                </template>
            </el-table-column>
            <el-table-column prop="type" label="类型">
                <template slot-scope="scope">
                    <el-select v-model="scope.row.type" placeholder="请选择类型" size="small" class="form-item">
                        <el-option v-for="item in setting.data_type_list" :label="item.text"
                                   :value="item.value">
                        </el-option>
                    </el-select>
                </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="150" class-name="operate-column">
                <template slot-scope="scope">
                    <el-button type="text" size="small" class="text-danger"
                               @click.native="delDataColumn(scope.$index)">删除
                    </el-button>
                    <el-button type="text" size="small"
                               @click.native="columnRowUp(scope.$index)">上移
                    </el-button>
                    <el-button type="text" size="small"
                               @click.native="columnRowDown(scope.$index)">下移
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </el-scrollbar>

    <div class="text-center" slot="footer">
        <el-button type="danger" size="small" @click="dataColumnDialog = false">
            取消
        </el-button>
        <el-button type="primary" size="small" @click="submitBlockColumn">
            更新
        </el-button>
    </div>

</el-dialog>
<!--数据字段 弹出层-->

<?= Asset::addCss($this, '/css/backend/block-index.css'); ?>

<?= Asset::addScript($this, '/js/backend/block-index.js'); ?>
<?= $this->registerJs('instance = new app();'); ?>
